<script setup lang="ts">
defineProps<{
  courseName: string
  unitName: string
}>()

const emit = defineEmits<{
  (e: 'selectCourse'): void
  (e: 'changeUnit'): void
}>()

function handleSelectCourse() {
  emit('selectCourse')
}

function handleChangeUnit() {
  emit('changeUnit')
}
</script>

<template>
  <view class="course-info">
    <view class="title">
      <text>{{ courseName }}</text>
    </view>
    <view class="unit">
      <text> {{ unitName }}</text>
      <uv-tags text="换单元" type="warning" plain @click="handleChangeUnit" />
    </view>
    <view class="select-course">
      <uv-tags text="选择课程" type="primary" size="large" plain @click="handleSelectCourse" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.course-info {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    position: relative;

    .title {
        display: flex;
        align-items: center;
        font-size: 40rpx;
        font-weight: 600;
        margin-bottom: 24rpx;
        color: #333;

        text {
            // margin-left: 16rpx;
        }
    }

    .unit {
        display: flex;
        align-items: center;
        gap: 20rpx;
        margin-bottom: 20rpx;

        text {
            font-size: 32rpx;
            color: #666;
        }
    }

    .select-course {
        margin-top: 20rpx;
        position: absolute;
        top: 20rpx;
        right: 40rpx;
    }
}
</style>
